<template>
    <div style="padding: 20px;">
        <p style="font-size: 30px;text-align: left;margin: 10px 0;">所有题库</p>
        <div class="questionBank">
            <h1 style="font-size: 24px;text-align: left;padding: 0px 20px;padding-top: 20px;">已有题库:<span>{{ info.length
            }}</span>道</h1>
            <div>
                <div style="margin-left: 30px;">
                    <el-form label-position="right" label-width="80px" v-model="formLabelAlign">
                        <el-form-item label="方向">
                            <el-select v-model.trim="formLabelAlign.value1">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="第几周">
                            <el-select v-model.trim="formLabelAlign.value2">
                                <el-option v-for="item1 in options2" :key="item1.value" :label="item1.label"
                                    :value="item1.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="难度">
                            <el-select v-model.trim="formLabelAlign.value3">
                                <el-option v-for="item2 in options3" :key="item2.value" :label="item2.label"
                                    :value="item2.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="搜索">
                            <el-input placeholder="题目关键词" style="width: 200px;">
                            </el-input>
                        </el-form-item>
                        <el-button
                            style="background-color: rgb(23, 97, 253);color: white;margin-right: 300px;margin-top: -23px;">搜索</el-button>
                    </el-form>
                </div>
                <div class="grid-content bg-purple"
                    v-for="(item, index) in (info.slice((currentPage - 1) * pageSize, currentPage * pageSize))"
                    :key="index">
                    <div class="fatherbox" v-if="item.qtype == '选择'">
                        <el-button type="text" slot="reference" @click="del(item.qid)"
                            style="position: absolute;top: 0px;color: #333;">删除</el-button>
                        <!-- 编辑弹窗 -->
                        <el-popover placement="left-start" title="编辑班级" trigger="click">
                            <el-form ref="addClassData" v-model="addClassData" label-width="80px"
                                style="display: flex;flex-direction: column;">
                                <el-form-item label="题目">
                                    <el-input v-model.trim="addClassData.topic"></el-input>
                                </el-form-item>
                                <el-form-item label="选项A">
                                    <el-input v-model.trim="addClassData.paone"></el-input>
                                </el-form-item>
                                <el-form-item label="选项B">
                                    <el-input v-model.trim="addClassData.paone1"></el-input>
                                </el-form-item>
                                <el-form-item label="选项C">
                                    <el-input v-model.trim="addClassData.paone2"></el-input>
                                </el-form-item>
                                <el-form-item label="选项D">
                                    <el-input v-model.trim="addClassData.paone3"></el-input>
                                </el-form-item>
                                <el-form-item label="正确选项">
                                    <el-select v-model.trim="addClassData.answer" placeholder="请选择正确选项">
                                        <el-option v-for="item in options4" :key="item.value" :label="item.label"
                                            :value="item.value"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-button type="primary" style="background-color: rgb(23, 97, 253);margin-left: 500px;"
                                    @click="editData(addClassData)">编辑</el-button>
                            </el-form>
                            <el-button size="mini" type="primary" slot="reference" @click="ck(item)">编辑</el-button>
                        </el-popover>
                        <div class="timubox">
                            <span class="xingbox">*</span>
                            <span class="tixubox">{{ (currentPage - 1) * pageSize + index + 1 }}、</span>
                            <span>{{ item.topic }}</span>
                        </div>
                        <div class="Selection">
                            <div class="box">
                                <el-radio disabled label="A">{{ item.options.split(';')[0] }}
                                    <span v-show="item.answer == 'A'" class="answers">(正确答案)</span>
                                </el-radio>
                                <el-radio disabled label="B">{{ item.options.split(';')[1] }}
                                    <span v-show="item.answer == 'B'" class="answers">(正确答案)</span>
                                </el-radio>
                                <el-radio disabled label="C">{{ item.options.split(';')[2] }}
                                    <span v-show="item.answer == 'C'" class="answers">(正确答案)</span>
                                </el-radio>
                                <el-radio disabled label="D">{{ item.options.split(';')[3] }}
                                    <span v-show="item.answer == 'D'" class="answers">(正确答案)</span>
                                </el-radio>
                            </div>
                        </div>
                        <hr>
                    </div>
                    <div class="fatherbox" v-else-if="item.qtype == '填空'">
                        <el-button type="text" slot="reference" @click="del(item.qid)"
                            style="position: absolute;top: 0px;color: #333;">删除</el-button>
                        <!-- 编辑弹窗 -->
                        <el-popover placement="left-start" title="编辑班级" trigger="click">
                            <el-form ref="addClassDatb" v-model="addClassDatb" label-width="80px"
                                style="display: flex;flex-direction: column;">
                                <el-form-item label="题目">
                                    <el-input v-model.trim="addClassDatb.topic"></el-input>
                                </el-form-item>
                                <el-form-item label="参考答案">
                                    <el-input v-model.trim="addClassDatb.answer"></el-input>
                                </el-form-item>
                                <el-button type="primary" style="background-color: rgb(23, 97, 253);margin-left: 500px;"
                                    @click="editData(addClassDatb)">编辑</el-button>
                            </el-form>
                            <el-button size="mini" type="primary" slot="reference" @click="qk(item)">编辑</el-button>
                        </el-popover>
                        <div class="timubox">
                            <span class="xingbox">*</span>
                            <span class="tixubox">{{ (currentPage - 1) * pageSize + index + 1 }}、</span>
                            <span>{{ item.topic }}</span>
                        </div>
                        <div class="refanswers">
                            <span class="reference">参考答案：</span>
                            <span>{{ item.answer }}</span>
                        </div>
                        <hr>
                    </div>
                </div>
                <el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange"
                    :total="info.length * 2">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            ruleForm: '',
            options1: [
                {
                    value: "选项1",
                    label: "java"
                },
                {
                    value: "选项2",
                    label: "web"
                },
                {
                    value: "选项3",
                    label: "ui"
                }
            ],
            options2: [
                {
                    value: "1",
                    label: "1"
                },
                {
                    value: "2",
                    label: "2"
                },
                {
                    value: "3",
                    label: "3"
                },
                {
                    value: "4",
                    label: "4"
                },
                {
                    value: "5",
                    label: "5"
                }
            ],
            options3: [
                {
                    value: "选项1",
                    label: "易"
                },
                {
                    value: "选项3",
                    label: "难"
                }
            ],
            options4: [
                {
                    value: "A",
                    label: "A"
                },
                {
                    value: "B",
                    label: "B"
                },
                {
                    value: "C",
                    label: "C"
                },
                {
                    value: "D",
                    label: "D"
                }
            ],
            formLabelAlign: {
                value1: '',// 方向
                value2: '',// 第几周
                value3: '',// 难度
            },
            currentPage: 1,
            pageSize: 4,
            value: '',
            radio: 4,
            radio1: '',
            radio2: '',
            info: [],// 题库
            teemp: false,// 选择题弹窗
            addClassDatb: {
                topic: '',
                options: '',
                answer: '',
                qtype: '',
            },// 填空题编辑的数据
            eidtid: '',// id
            addClassData: {
                topic: '',
                paone: '选项一',
                paone1: '选项二',
                paone2: '选项三',
                paone3: '选项四',
                answer: '',
                qtype: '',
            },// 选择题编辑的数据
            Visiable: false,// 删除
        }
    },
    methods: {
        handleCurrentChange(val) {
            this.currentPage = val
        },
        // 填空的编辑
        qk(val) {
            this.addClassDatb.topic = val.topic;
            this.addClassDatb.answer = val.answer;
            this.eidtid = val.qid;
            this.addClassDatb.qtype = val.qtype;
        },
        // 选项的编辑
        ck(val) {
            this.Visiable = true;
            this.addClassData.topic = val.topic;
            this.addClassData.answer = val.answer;
            this.eidtid = val.qid;
            this.addClassData.qtype = val.qtype;
        },
        editData(data) {
            let arr = {};
            if (data.qtype == '选择') {
                arr = {
                    topic: data.topic,
                    options: `A:${data.paone};B:${data.paone1};C:${data.paone2};D:${data.paone3}`,
                    answer: data.answer,
                }
                console.log(arr);
            } else if (data.qtype == '填空') {
                arr = {
                    topic: data.topic,
                    answer: data.answer,
                    options: '',
                }
            }
            console.log(arr, 264, data);
            this.$axios.put(`/question/eqitQuestion/${this.eidtid}`, arr,
                { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then((response) => {
                    console.log(response);
                    if (response.data.status !== 200) {
                        return this.$message({
                            type: 'error',
                            message: '编辑失败'
                        })
                    }
                    this.$message({
                        type: 'success',
                        message: '编辑成功'
                    })
                    this.get();
                    this.teemp = false;
                    this.Visiable = false;
                });
            console.log(arr, 282, data);
        },
        // 删除
        del(id) {
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let payload = {
                    id: id,
                };
                this.$axios.delete('/question/deleteQuestion', { params: payload }).then((response) => {
                    console.log(response);
                    if (response.data.status !== 200) {
                        return this.$message({
                            type: 'error',
                            message: '删除题目失败'
                        });
                    }
                    this.$message({
                        type: 'success',
                        message: '删除题目成功'
                    });
                    this.$axios.get('/question/getquestion').then((res) => {
                        this.info = res.data.data;
                    });
                    this.get();
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        get() {
            this.$axios.get('/question/getquestion').then((res) => {
                this.info = res.data.data;
            })
        }
    },
    mounted() {
        this.get();
    }
}
</script>

<style lang="less" scoped>
.questionBank {
    width: 1450px;
    margin: auto;
    box-shadow: 0px 0px 30px rgba((0), 0, 0, 0.18);
}

.opti {
    float: left;
    width: 220px;
    margin-right: 10px;
}

.question {
    width: 800px;
    height: 250px;
    border-bottom: 2px solid gray;
    margin-left: 50px;

    .el-radio {
        margin-top: 15px;
        margin-left: 40px;
    }
}

.fillBank {
    width: 800px;
    height: 250px;
    margin-left: 50px;
    border-bottom: 2px solid gray;
}

.el-form {
    display: flex;
    align-items: center;
}

.select {
    font-weight: 400;
    font-size: 14px;
    color: rgb(105, 113, 157);
    line-height: 20px;
}

.el-input {
    width: 300px;
}

/deep/ .el-input-group__append {
    background: #1761FD;
    color: #fff;
}

.timubox {
    line-height: 35px;
    text-align: left;
    margin-top: 30px;
}

.xingbox {
    color: #FF5E59;
    margin-left: 35px;
}

.tixu {
    margin-right: 20px;
}

.fatherbox {
    position: relative;

    .el-button {
        position: absolute;
        top: 30px;
    }
}

.box {
    display: flex;
    flex-direction: column;
    text-align: left;
    margin-left: 70px;
}

.el-radio {
    line-height: 30px;
}

.answers {
    color: #1BC487;
    margin-left: 10px;
}

hr {
    width: 950px;
    height: 2px;
    margin-left: 35px;
    background: #BBBBBB;
    border: none;
}

.refanswers {
    text-align: left;
    margin-left: 40px;
}

.reference {
    display: inline-block;
    font-size: 16px;
    color: rgb(16, 16, 16);
    line-height: 42px;
}

.el-pagination {
    padding: 20px 0px;
}
</style>